<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui,user-scalable=no">
<title>评选系统 - 后台首页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="vendor/swiper/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> 
</head>
<body>
	
<!-- Overlay panel -->
<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>


<div class="page page--main" data-page="tables">
	
	<header class="header header--page header--fixed">	
		<div class="header__inner">
			<div class="header__icon header__icon--menu open-panel" data-panel="left"></div>
			<div class="header__logo header__logo--text"><a href="#">评选系统--<strong>后台管理</strong></a></div>
			<div class="header__icon open-panel" data-panel="right"></div>
        </div>
	</header>
	
	<!-- PAGE CONTENT -->
	<div class="page__content page__content--with-header">
		<h2 class="page__title">奖项列表</h2>
		<p class="welcome">
			<form class="layui-form" action="" lay-filter="fillingData">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label" style="width: auto">条件搜索：</label>
					</div>
					<div class="layui-inline" style="color:white;">
						<input autocomplete="off" type="text" name="prizeName_HT" id="prizeName_HT" class="layui-input" style="width: 8em;" placeholder="奖项名" value="">
					</div>
					<div class="layui-inline">
						<select  name="status" id="status">
							<option value=""></option>
							<option value="0">已结束</option>
							<option  value="1">进行中</option>
						</select>
					</div>
					<div class="layui-inline">
						<input type="text" id="displayLength" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="12">
						<button id="searchPrize_Ht" type="button" class="layui-btn" lay-submit="" lay-filter="searchPrize_Ht">查询奖项信息</button>
					</div>
				</div>
			</form>
		</p>
		<h3>
			<button id="addPrizeBtu" type="button" class="layui-btn layui-bg-cyan" lay-filter="addPrizeBtu"><i class="layui-icon">&#xe654;</i>  发布新奖项</button>
		</h3>
		<h3 style="color:red;">● 点击奖项名可查询当前投票的结果; 点击提名人数可以查看提名人信息</h3>
            <div class="table table--7cols mb-20">
				<div class="table__inner" id="table__inner">
					<div class="table__row">
						<div style="width: auto" class="table__section table__section--header">奖项名</div>
						<div style="width: auto" class="table__section table__section--header">开始时间</div>
						<div style="width: auto" class="table__section table__section--header">结束时间</div>
						<div style="width: auto" class="table__section table__section--header">项目状态</div>
						<div style="width: auto" class="table__section table__section--header">名额</div>
						<div style="width: auto" class="table__section table__section--header">已提名</div>
						<div style="width: auto" class="table__section table__section--header">操作</div>
					</div>
				</div>
            </div>
		<!--页面切换组件-->
		<div style="flex: 1" align="center">
			<div class="pageNav">
                 <span class="layui-breadcrumb" lay-separator="-" style="color:white;">
                   <a class="fristPage">首页</a>
                   <a class="lastPage">上一页</a>
                   <a><cite>第<span id="page"></span>页</cite></a>
                   <a class="totalPage"><cite>共<span id="total">0</span>页</cite></a>
                   <a class="nextPage">下一页</a>
                   <a class="endPage">尾页</a>
                 </span>
			</div>
		</div>
	</div>
			  



</div>
<!-- PAGE END -->

<!-- Social Icons Popup -->
<div id="popup-social"></div>
 
<!-- Alert --> 
<div id="popup-alert"></div>  

<!-- Notifications --> 
<div id="popup-notifications"></div>  

<script src="vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="vendor/jquery/jquery.validate.min.js" ></script>
<script src="vendor/swiper/swiper.min.js"></script>
<script src="js/swiper-init.js"></script>
<script src="js/jquery.custom.js"></script>
<script src="layui/layui.js"></script>
<script src="htStatic/js/echarts.js"></script>
<script>
	var layer=layui.layer;
	var form = null;
	var displayStart = 1;
	var endPage = null;
	var choose_file_flag=false;

	window.onload=function (e) {
		if (sessionStorage.getItem('adminName') == null  || sessionStorage.getItem('adminName') == '') {
			layer.msg("请先登录管理员账号...")
			setTimeout(function () {
				location.href = '/htLogin';
			}, 1000);
		}
	}

	//查询奖项
	searchPrize_Ht(1)
	$('.fristPage').click(function() {
		searchPrize_Ht(1);
		return false;
	});
	$('.lastPage').click(function() {
		searchPrize_Ht((displayStart > 1 ? displayStart - 1 : 1));
		return false;
	});
	$('.nextPage').click(function() {
		searchPrize_Ht((displayStart < endPage ? displayStart + 1 : endPage));
		return false;
	});
	$('.endPage').click(function() {
		searchPrize_Ht(endPage);
		return false;
	})
	$('#searchPrize_Ht').click(function () {
		searchPrize_Ht(1);
		return false;
	})

	//奖项查询具体方法
	function searchPrize_Ht(index) {
		if (!index) var index = displayStart;
		$.ajax({
			url: '' + '/prize-info/listPrizeHt',
			method: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({
				displayStart:index,
				displayLength:$('#displayLength').val(),
				prizeName:$('#prizeName_HT').val(),
				status:$('#status').val()
			}),
			success: function(res) {
				$('#table__inner').empty().append(
						"<div class='table__row'>" +
						"	<div style='width: auto' class='table__section table__section--header'>奖项名</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>开始时间</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>结束时间</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>项目状态</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>名额</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>提名</div>" +
						"	<div style='width: auto' class='table__section table__section--header'>操作</div>" +
						"</div>"
				)
				displayStart = res.data.current;
				endPage = res.data.pages;
				for (var i = 0; i < res.data.records.length; i++) {
					$('#table__inner').append(
							"<div class='table__row'>" +
							"<div style='width: auto;' class='table__section'><span style='color: #01AAED;cursor: pointer' onclick='viewVoteResult(\"" + res.data.records[i].prizeNum + "\",\"" + res.data.records[i].prizeName + "\")'>"+res.data.records[i].prizeName+"</span></div>" +
							"<div style='width: auto;' class='table__section'><span style='color: #01AAED;'>"+res.data.records[i].startTime.split('T')[0]+"</span></div> " +
							"<div style='width: auto;' class='table__section'><span style='color: #01AAED;'>"+res.data.records[i].endTime.split('T')[0]+"</span></div>" +
							"<div style='width: auto;' class='table__section'><span>"+prizeStatus(res.data.records[i].status)+"</span></div>" +
							"<div style='width: auto;' class='table__section'><span>"+res.data.records[i].allowAmounts+"</span></div>" +
							"<div style='width: auto;' class='table__section'><span style='color: #01AAED;cursor: pointer' onclick='viewNominee(\"" + res.data.records[i].prizeNum + "\",\"" + res.data.records[i].prizeName + "\")'>"+res.data.records[i].nomineeNums+"</span></div>" +
							"<div style='width: auto;' class='table__section' title='"+res.data.records[i].prizeName+"'>" +
							"<span><a onclick='addNominee(\"" + res.data.records[i].prizeNum + "\",\"" + res.data.records[i].prizeName + "\")' class='button button--main button--ex-small'>+提名</a></span>" +
							"<span><a onclick='editPrize(\"" + res.data.records[i].prizeNum + "\",\"" + res.data.records[i].prizeName + "\")' class='button button--secondary button--ex-small'>+编辑</a></span>" +
							"</div>" +
							"</div>"
					);
				}
				if(res.data.records.length==0){
					$('#total').html(0)
				}else{
					$('#total').html(Math.ceil(res.data.total/Number($('#displayLength').val())))
				}
				$('#page').html(displayStart)

			}
		})
	}

	function prizeStatus(index) {
		switch (index) {
			case '0':
				return '<strong style="color: #ff1919;">已结束</strong>';
			case '1':
				return '<strong style="color: #389E0D;">进行中</strong>';
		}
	}
	
	function viewVoteResult(index,name) {
		layer.open({
			type: 1,
			skin: 'layui-layer-rim',
			area: ['100%', '75%'],
			title: name+'- 投票结果',
			content: `
                                <div id="charts" style="width: 100%;height: 100%"></div>
          `,
			success: function(){
				$.ajax({
					url: '' + '/nominee-info/voteResult/'+index,
					method: 'GET',
					async : false,
					contentType: 'application/json',
					success: function(res) {
						if (res.code == 200) {
							//生成排行
							var chartDom = document.getElementById('charts');
							var myChart = echarts.init(chartDom);
							var option;
							option = {
								title: {
									text: '结果排行'+'( 预设名额：'+res.data.allowAmounts+' 名 )'
								},
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'shadow'
									}
								},
								legend: {},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: {
									type: 'value',
									boundaryGap: [0, 0.01]
								},
								yAxis: {
									type: 'category',
									data: res.data.names
								},
								series: [
									{
										name: '票数',
										type: 'bar',
										data: res.data.counts
									}
								]
							};
							myChart.setOption(option);
						}else {
							layer.msg(res.msg)
						}
					}
				})

			}
		});
	}

	function viewNominee(index,name) {
		layer.open({
			type: 1,
			skin: 'layui-layer-rim',
			area: ['100%', '75%'],
			title: name+'- 提名详情',
			content: `
                               <table class="layui-table" lay-skin="" id="" style="width: 100%;">
									<thead>
									<tr style="background-color: #c1c1c1">
									<th style="text-align: center;color: black">姓名</th>
									<th style="text-align: center;color: black">职务</th>
									<th style="text-align: center;color: black">当前票数</th>
									</tr>
									</thead>
									<tbody id="resultTable"></tbody>
							</table>
          `,
			success: function(){
				$.ajax({
					url: '' + '/nominee-info/viewNominee/'+index,
					method: 'GET',
					contentType: 'application/json',
					success: function(res) {
						for (var i = 0; i < res.data.length; i++) {
							$('#resultTable').append(
									"<tr>" +
									"<td style='color: #01AAED'>" + res.data[i].name + "</td>" +
									"<td style='color: #01AAED'>" + res.data[i].zwname + "</td>" +
									"<td style='color: #01AAED'>" +res.data[i].votes  + "</td>" +
									"</tr>"
							);
						}
					}
				})
			}
		});
	}

	function addNominee(index,name) {
		layer.open({
			type: 1,
			skin: 'layui-layer-rim',
			area: ['100%', '60%'],
			title: name+'- 新增提名人',
			content: `
<form class="layui-form" novalidate onkeydown="if(event.keyCode==13){return false;}">
    <div class="layui-input-inline" style="margin: 5px">
        <span id="mouldName" style="width: 20em"></span>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto;"><b style="color:red;">*</b>姓名：</label>
        <div class="layui-input-inline " style="width: 15em">
            <select name="userName_N" id="userName_N" lay-verify="required" lay-filter="userName_N" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto;"><b style="color:red;">*</b>职务：</label>
        <div class="layui-input-inline " style="width: 8em">
            <input type="text" id="zwName_N" name="zwName_N" lay-verify="required" autocomplete="off" class="layui-input" style="width: 15em;"
                   placeholder="请先选择提名人" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto;"><b style="color:red;">*</b>提名奖项：</label>
        <div class="layui-input-inline " style="width: 8em">
            <input type="text" id="prizeName_N" name="prizeName_N" lay-verify="required" autocomplete="off" class="layui-input" style="width: 15em;"
                   placeholder="请输入提名奖项" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto;"><b style="color:red;">*</b>介绍：</label>
        <div class="layui-input-inline " style="width: 30em">
            <textarea name="introduce" id="introduce" placeholder="请输入介绍内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" >
        <div class="layui-input-inline" >
            <div class="layui-upload-drag" id="uploadFile" lay-verify="isupload" style="width: 75%">
                <i class="layui-icon"></i>
                <p>点击或拖拽上传提名人照片！<br>●10M以内！</p>
            </div>
            <span id="filename" style="width: 10em"></span>
        </div>
        <div class="layui-input-inline" style="margin: 5px;">
            <button id="uploadBtn" type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="uploadBtn">确认提交</button>
        </div>
    </div>
    </form>
          `,
			success: function(){
				//奖项名自动带入
				$('#prizeName_N').val(name)
				//提名人信息自动获取
				layui.use(['form',"layer"], function() {
					form=layui.form;
					//提名人下拉框
					$.ajax({
						url: '' + '/ygzlw/selectYgzl',
						method: 'POST',
						async : false,
						contentType: 'application/json',
						success: function(res) {
							if (res.code == 200) {
								$("#userName_N").append("<option value=''></option>");
								for (var i = 0; i < res.data.length; i++) {
									$("#userName_N").append("<option value='" + res.data[i].zwname + "_"+i+ "'>" + res.data[i].name +
											"</option>");
								}
								form.render('select');
							}
						}
					})
					//下拉框联动
					form.on('select(userName_N)', function(data) {
						$("#zwName_N").val($('#userName_N option:selected').val().split("_")[0])
					})
				})
				//文件上传框功能赋予
				var upload=layui.upload;
				//文件上传
				var uploadInst =upload.render({
					elem: '#uploadFile', //绑定元素（上传文件的id）
					url: '/nominee-info/addNominee', //上传接口
					method: 'POST',
					auto: false,
					exts: 'png|jpg|jpeg',// 设置允许上传的格式
					bindAction: '#uploadBtn', //指向一个按钮触发上传
					size: 102400,//限制文件大小10M
					multiple: false,
					data:{},
					choose:function(obj){
						obj.preview(function(index, file, result){
							if(file.name.length>0) {
								choose_file_flag=true;
								$("#filename").text(file.name);
							}
						});
					},
					before: function(obj) {
						obj.preview(function(index, file, result){
							layer.load();
							if(file.name.length>0) {
								choose_file_flag=true;
							}
						});
						this.data= {
							'zwName': $("#zwName_N").val(),
							'userName': $('#userName_N option:selected').text(),
							'introduce': $('#introduce').val(),
							'prizeNum': index
						};
					},
					done: function(res, file, upload) {//上传完毕回调
						if(res.code==200){
							layer.alert(res.msg,{
								icon: 1,
								skin: 'layer-ext-demo',
								end:function () {
									location.reload()
									layer.closeAll('loading');
								}
							})
						}else{
							layer.alert(res.msg,{
								icon: 2,
								skin: 'layer-ext-demo',
								end:function () {
									location.reload()
									layer.closeAll('loading');
								}
							})
						}
					}
					, error: function() {//请求异常回调
						layer.closeAll('loading');
						layer.alert('上传发生异常，请稍后重试！');
					}
				});
			}
		});
		//提交提名功能
		$('#uploadBtn').click(function () {
			var zwName = $("#zwName_N").val()
			var userName = $('#userName_N option:selected').text()
			var prizeNum = index;
			if(choose_file_flag==false){
				layer.msg("请上传提名人照片！")
			}else if(userName==null||zwName==null||prizeNum==null||userName==""||zwName==""||prizeNum==""){
				layer.msg("信息不完整，请确认...")
			}
		})
	}

	function deletePrize(index,name){
		let confirm1=layer.confirm('您确定要删除 '+name+' 吗？', {
			btn: ['确定','取消'] //按钮
		}, function(){
			$.ajax({
				url: '' + '/prize-info/deletePrize/'+index,
				method: 'GET',
				contentType: 'application/json',
				success: function(res) {
					layer.msg(res.msg);
					searchPrize_Ht(displayStart)
				}
			})
			layer.close(confirm1);
		}, function(){
			layer.close(confirm1);
		});
	}

	function editPrize(index,name){
		layer.open({
			type: 1,
			skin: 'layui-layer-rim',
			area: ['100%', '30%'],
			title: '编辑--'+name,
			content: `
                   <div class="layui-row" style="margin-bottom: 10px"></div>
                   <input id="orderId" type="text" name="id" style="display: none;">

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">奖项名：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input id="prizeName_EDIT" autocomplete="off" type="text" placeholder="请输入奖项名" name="prizeName_EDIT" lay-verify="required" class="layui-input" style="margin-bottom: 10px ; width: 15em !important;">
                   </div></div>

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">预设名额：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input id="allAmounts_EDIT" autocomplete="off" onkeyup="value=value.replace(/[^\\d]/g,'')" type="text" placeholder="请输入预设名额" name="allAmounts_EDIT" lay-verify="required" class="layui-input" style="margin-bottom: 10px ; width: 15em !important;">
                   </div></div>

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">结束时间：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input type="text" class="layui-input" id="endTime_EDIT" autocomplete="off">
                   </div></div>

                   <div align="center" style="margin: 40px">
                   <button id="edit_btn" type="button" class="layui-btn" lay-filter="edit_btn" >提交修改</button>
                   <button type="button" class="layui-btn layui-btn-danger" onclick="parent.layer.closeAll()">取消</button></div>
          `,
			success: function(){
				layui.use('laydate', function(){
					var laydate = layui.laydate;
					//执行一个laydate实例
					laydate.render({
						elem: '#endTime_EDIT' //指定元素
					});
				});
				$.ajax({
					url: '' + '/prize-info/getPrizeInfo/'+index,
					method: 'GET',
					contentType: 'application/json',
					success: function(res) {
						if(res.code==200){
							$('#prizeName_EDIT').val(res.data.prizeName)
							$('#allAmounts_EDIT').val(res.data.allowAmounts)
							$('#endTime_EDIT').val(res.data.endTime.split('T')[0])
						}
					}
				})

			}
		});

		//提交
		$('#edit_btn').click(function () {
			var prizeName=$('#prizeName_EDIT').val();
			var allAmounts=$('#allAmounts_EDIT').val();
			var endTime=$('#endTime_EDIT').val();
			if(prizeName==null||allAmounts==null||endTime==null||prizeName==""||allAmounts==""||endTime==""){
				layer.msg("请填写正确信息！")
			}
			$.ajax({
				url: '' + '/prize-info/editPrize',
				method: 'POST',
				async : false,
				contentType: 'application/json',
				data: JSON.stringify({
					prizeName:prizeName,
					endTime: endTime,
					allowAmounts: allAmounts,
					prizeNum:index
				}),
				success: function(res) {
					if (res.code == 200) {
						parent.layer.alert(res.msg, {
							icon: 1,
							skin: 'layer-ext-demo',
							end: function(){
								location.reload();
							}
						});
					}else {
						parent.layer.alert(res.msg, {
							icon: 2,
							skin: 'layer-ext-demo'
						});
					}
				}
			})
			return false;
		})
	}

	$('#addPrizeBtu').click(function () {
		layer.open({
			type: 1,
			skin: 'layui-layer-rim',
			area: ['100%', '30%'],
			title: '新增项目',
			content: `
                   <div class="layui-row" style="margin-bottom: 10px"></div>
                   <input id="orderId" type="text" name="id" style="display: none;">

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">奖项名：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input id="prizeName_ADD" autocomplete="off" type="text" placeholder="请输入奖项名" name="prizeName_ADD" lay-verify="required" class="layui-input" style="margin-bottom: 10px ; width: 15em !important;">
                   </div></div>

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">预设名额：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input id="allAmounts" autocomplete="off" onkeyup="value=value.replace(/[^\\d]/g,'')" type="text" placeholder="请输入预设名额" name="allAmounts" lay-verify="required" class="layui-input" style="margin-bottom: 10px ; width: 15em !important;">
                   </div></div>

                   <div class="layui-input-inline" style="margin: 5px;">
                   <label class="layui-form-label">结束时间：</label>
                   <div class="layui-input-inline " style="width: 15em"  >
                   <input type="text" class="layui-input" id="endTime" autocomplete="off">
                   </div></div>

                   <div align="center" style="margin: 40px">
                   <button id="add_btn" type="button" class="layui-btn" lay-filter="add_btn" >确认发布</button>
                   <button type="button" class="layui-btn layui-btn-danger" onclick="parent.layer.closeAll()">取消</button></div>
          `,
			success: function(){
				layui.use('laydate', function(){
					var laydate = layui.laydate;
					//执行一个laydate实例
					laydate.render({
						elem: '#endTime' //指定元素
					});
				});
			}
		});

		//保存
		$('#add_btn').click(function () {
			var prizeName=$('#prizeName_ADD').val();
			var allAmounts=$('#allAmounts').val();
			var endTime=$('#endTime').val();
			if(prizeName==null||allAmounts==null||endTime==null||prizeName==""||allAmounts==""||endTime==""){
				layer.msg("请填写正确信息！")
			}
			$.ajax({
				url: '' + '/prize-info/addPrize',
				method: 'POST',
				async : false,
				contentType: 'application/json',
				data: JSON.stringify({
					prizeName:prizeName,
					createUser:sessionStorage.getItem('adminName'),
					endTime: endTime,
					allowAmounts: allAmounts
				}),
				success: function(res) {
					if (res.code == 200) {
						parent.layer.alert(res.msg, {
							icon: 1,
							skin: 'layer-ext-demo',
							end: function(){
								location.reload();
							}
						});
					}else {
						parent.layer.alert(res.msg, {
							icon: 2,
							skin: 'layer-ext-demo'
						});
					}
				}
			})
			return false;
		})

	})



</script>
</body>
</html>